<template>
  <div>
    <!-- 名画热搜切换 -->
    <van-row justify="space-around">
      <van-col span="6" @click="show0">总榜</van-col>
      <van-col span="6" @click="show1">中国名画</van-col>
      <van-col span="6" @click="show2">西方名画</van-col>
    </van-row>
    <br>
    <!-- 名画热搜 -->
    <div v-show="isShow0">
      <div v-for="(item, i) in list" :key="item.id">
        <router-link :to="'/pictureinfo/'+ item.id">
          <van-cell :title="(i+1)+' '+item.name+' '+item.author" class="cell">
            <template #right-icon >
              <!-- 浏览次数达到50次在标题后加“热”字图像 -->
              <img v-if="item.view >= 50" src="../../../public/hot.png" alt="">
            </template>
          </van-cell>
        </router-link>
      </div>
    </div>
    <!-- 中国名画热搜 -->
    <div v-show="isShow1">
      <div v-for="(item, i) in list" :key="item.id">
        <router-link :to="'/pictureinfo/'+ item.id">
          <van-cell :title="(i+1)+' '+item.name+' '+item.author" class="cell">
            <template #right-icon >
              <img v-if="item.view >= 50" src="../../../public/hot.png" alt="">
            </template>
          </van-cell>
        </router-link>
      </div>
    </div>
    <!-- 西方名画热搜 -->
    <div v-show="isShow2">
      <div v-for="(item, i) in list" :key="item.id">
        <router-link :to="'/pictureinfo/'+ item.id">
          <van-cell :title="(i+1)+' '+item.name+' '+item.author" class="cell">
            <template #right-icon >
              <img v-if="item.view >= 50" src="../../../public/hot.png" alt="">
            </template>
          </van-cell>
        </router-link>
      </div>
    </div>
    <!-- 加载更多 还没有写-->
    <div >
      <van-cell title="加载更多" is-link/>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      isShow0: true,
      isShow1: false,
      isShow2: false,
      limit: 10,
      page: 1,
      address: 0,
      list: []
    }
  },
  methods: {
    // 根据浏览量大小得到热榜，address：0表示总榜，1表示中国名画，2表示西方名画
    async getPictureView () {
      const page = this.page
      const limit = this.limit
      const address = this.address
      const { data: res } = await this.$http({
        url: '/picture/pictureView',
        method: 'GET',
        params: {
          page,
          limit,
          address
        }
      })
      if (res.status === 0) {
        this.list = res.data
      }
    },
    // 展示总榜
    show0 () {
      this.isShow1 = false
      this.isShow2 = false
      this.isShow0 = true
      this.address = 0
      this.getPictureView()
    },
    // 展示中国名画榜
    show1 () {
      this.isShow0 = false
      this.isShow2 = false
      this.isShow1 = true
      this.address = 1
      this.getPictureView()
    },
    // 展示西方名画榜
    show2 () {
      this.isShow0 = false
      this.isShow1 = false
      this.isShow2 = true
      this.address = 2
      this.getPictureView()
    }
  },
  created () {
    this.getPictureView()
  }
}
</script>

<style lang="less" scoped>
  a{
    color: black;
    text-decoration: none;
  }
  .cell{
    padding: 1px 8px 1px 8px;
  }
  .fire-o{
    width: 30px;
    height: auto;
  }
</style>
